/* Only styles that are shared across multiple components (i.e. global) should go here, trying to keep this file
nimble to simplify maintenance. We separate variables and mixins in vars.scss to be able to import those into local
style files without adding already imported styles.

Font weights:
Only 400 (`normal`), 500 (`var(--font-medium)`), 600 (`var(--font-semibold)`), or 700 (`bold`) should be used

*/

@use 'sass:map';

// Global components
@import '../../../node_modules/react-toastify/dist/ReactToastify';
@import 'fonts';
@import 'functions';
@import 'mixins';
@import 'tailwindcss/components'; // NOTE: The components layer must be before utilities for correct specificity
@import 'utilities';
@import 'utilities-legacy'; // TODO: Remove all legacy utilities

:root {
    @include root-variables;
}

// Text styles
body b,
body strong {
    // body is specified to increase specificity – otherwise Ant Design's "bolder" takes precedence over "600"
    font-weight: 600;
}

// Disable default styling for ul
ul {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    list-style: none;
}

// This may look odd but sets up our utility classes
*,
*::before,
*::after {
    box-sizing: border-box;
    border-color: var(--border);
    border-style: solid;
    border-width: 0;
}

input[type='radio'] {
    accent-color: var(--primary-3000);
}

input[type='search'] {
    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button,
    &::-webkit-search-results-button,
    &::-webkit-search-results-decoration {
        display: none;
    }
}

.page-title-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    min-height: 2.5rem;
    margin: 1rem 0 0.25rem;

    @include screen($md) {
        flex-wrap: nowrap;
    }
}

.page-title {
    min-width: 0;
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 34px;
}

.page-caption {
    max-width: 48rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;

    &.tabbed {
        margin-bottom: 0.5rem;
    }
}

.secondary {
    font-size: 0.9em;
    font-weight: var(--font-medium);
    color: var(--primary-alt);
    text-transform: uppercase;
    letter-spacing: 1px;
    background: none;
    border: 0;
}

.card-secondary {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

mark {
    background-color: var(--mark) !important;
    border-radius: var(--radius);
}

hr {
    border: 1px solid var(--border);
}

// Vendor-specific adjustments

input::-ms-clear {
    display: none; // Hide IE/Edge's clear button that can mess input sizing up
}

// Highlight background blink

/* stylelint-disable-next-line keyframes-name-pattern */
@keyframes highlight {
    0% {
        background-color: var(--mark);
    }

    100% {
        background-color: initial;
    }
}

// Generic 360 spin

/* stylelint-disable-next-line keyframes-name-pattern */
@keyframes spin {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

// Toasts

.Toastify__toast {
    align-items: center;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    cursor: unset;
    border: 1px solid var(--secondary-3000-button-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-elevation-3000);
    opacity: 1 !important;
}

.Toastify__toast-container {
    padding: 0;
}

.Toastify__toast-body {
    padding: 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: var(--text-3000);

    b,
    strong {
        font-weight: 700;
    }

    button {
        margin: 0 0.75rem;
    }
}

.Toastify__toast-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
    font-size: 1.5rem;
    color: var(--muted-alt);

    .Toastify__toast--success & {
        color: var(--toastify-color-success);
    }

    .Toastify__toast--warning & {
        color: var(--toastify-color-warning);
    }

    .Toastify__toast--error & {
        color: var(--toastify-color-error);
    }
}

.Toastify__progress-bar {
    height: var(--radius);
}

// Form & input styles

.error-on-blur {
    &.errored:not(:focus) {
        border-color: var(--danger) !important;
    }
}

// Button styles

.info-indicator {
    margin-left: 4px;
    color: var(--primary-alt) !important;
    cursor: pointer;

    &.left {
        margin-right: 4px;
        margin-left: 0;
    }
}

// Graph series glyph

.graph-series-glyph {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 12px;
    font-weight: bold;
    pointer-events: none;
    border: 2px solid var(--text-3000);
    border-radius: 50%;

    // variants
    &.funnel-step-glyph {
        width: 23px;
        height: 23px;
        font-size: unset;
        color: var(--primary-alt);
        background-color: var(--bg-light);
        border-color: var(--border);
    }
}

// Bottom notice (DEBUG=1 mode)

#bottom-notice {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: var(--z-bottom-notice);
    display: flex !important;
    flex-direction: row;
    width: 100%;
    font-size: 0.75rem;
    line-height: 1.5rem;
    color: #fff;
    background: #000;

    code {
        font-size: inherit;
        color: inherit;
    }

    &.warning div {
        height: auto;
        background: var(--danger);
    }

    &.tricolor {
        cursor: pointer;

        div:nth-child(1) {
            background: var(--brand-blue);
        }

        div:nth-child(2) {
            background: var(--brand-red);
        }

        div:nth-child(3) {
            background: var(--brand-yellow);
        }

        span {
            cursor: text;
        }
    }

    div {
        flex-basis: 0;
        flex-grow: 1;
        height: 1.5rem;
        text-align: center;
    }

    span {
        display: none;
    }

    button {
        width: 1.5rem;
        height: 1.5rem;
        padding: 0;
        font-size: 1rem;
        font-weight: bold;
        color: inherit;
        cursor: pointer;
        background: transparent;
        border: none;
    }

    @media screen and (min-width: 750px) {
        font-size: 1rem;
        line-height: 2rem;

        div {
            height: 2rem;
        }

        span {
            display: inline;
        }

        button {
            width: 2rem;
            height: 2rem;
            font-size: 1.25rem;
        }
    }
}

html {
    text-size-adjust: 100%;
}

body {
    // Remove below once we're using Tailwind's base
    --tw-content: '';
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: var(--bg-light);
    --tw-ring-color: var(--primary-3000);
    --tw-ring-inset: ;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;

    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, Inter, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    color: var(--text-3000);
    touch-action: manipulation; // Disable double-tap-to-zoom on mobile, making taps slightly snappier
    background: var(--bg-3000);

    &[theme='light'] {
        @include light-mode-3000-variables;
    }

    &[theme='dark'] {
        @include dark-mode-3000-variables;
    }

    * > {
        ::-webkit-scrollbar {
            width: 0.5rem;
            height: 0.5rem;
        }

        ::-webkit-scrollbar-track {
            background: var(--accent-3000);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--trace-3000);
            border-radius: var(--radius);

            &:hover {
                background: var(--muted-3000);
            }
        }
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
        margin-top: 0;
        margin-bottom: 0.5em;
        font-family: var(--font-title);
        font-weight: 500;
    }

    h1,
    h2,
    h3,
    h4 {
        color: var(--text-3000);
    }

    h5 {
        margin-bottom: 0.25rem;
        font-size: 0.6875rem;
        font-weight: 600;
        line-height: 1.5rem;
        color: var(--muted-alt);
        text-transform: uppercase;
        letter-spacing: 0.075em;
    }

    small {
        font-size: 80%;
    }

    pre,
    code,
    kbd,
    samp {
        font-family: var(--font-mono);
    }

    pre {
        margin-top: 0;
        margin-bottom: 1em;
        overflow: auto;
    }

    .LemonButton,
    .Link {
        .text-link {
            color: var(--text-3000) !important;
        }

        &:hover {
            .text-link {
                color: var(--primary-3000) !important;
            }
        }
    }

    @include common-variables;
}

a {
    color: var(--link);
    text-decoration: none;
}

p {
    margin-top: 0;
    margin-bottom: 1em;
}

table {
    border-collapse: collapse;
}

img {
    vertical-align: middle;
    border-style: none;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

[tabindex='-1']:focus {
    outline: none !important;
}

.storybook-test-runner {
    &.storybook-test-runner--fullscreen {
        height: fit-content;
    }

    &.storybook-test-runner--padded {
        #storybook-root {
            // Make the root element (which is the default screenshot reference) hug the component
            display: inline-block;
        }
    }

    // Only use this class in visual regression tests
    *,
    *::before,
    *::after {
        transition-duration: 0ms !important;
        animation-fill-mode: forwards !important;
        animation-duration: 0ms !important;
        animation-iteration-count: 1 !important;
    }

    // Hide some parts of the UI that were causing flakiness
    ::-webkit-scrollbar,
    *> ::-webkit-scrollbar,
    // Scrollbar in WebKit/Blink browsers
    .LemonTabs__bar::after,
    // Active tab slider
    .scrollable::after,
    // Scrollability indicators
    .scrollable::before {
        display: none;
    }

    #storybook-root > .fixed:only-child {
        // Fix for stories of fixed overlays like CommandBar - otherwise body would be zero-sized
        position: static !important;
    }

    #storybook-root:empty ~ .ReactModalPortal > .ReactModal__Overlay {
        // Fix for stories of fixed modals - otherwise body would be zero-sized
        position: static !important;
    }
}

.ligatures-none {
    font-variant-ligatures: none;
}

.hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        display: none;
    }
}
